<template>
  <div class="canvas-test size-full" ref="boxRef">
    <div class="canvas-test-action">
      <div class="margin-bottom-8">
        <button class="margin-right-6" @click="draw">{{ drawStatus ? '暂停' : '开始' }}画图</button>
        <button class="margin-right-6" @click="back">回放</button>
        <button class="margin-right-6" @click="clearRect">清空画布</button>
        <button class="margin-right-6" @click="clearDraw">全部清除</button>

        <label>设置线颜色</label>
        <select class="margin-right-6" @input="selectStrokeColor">
          <option
            v-for="color in colors"
            :value="color"
            :key="color"
            :style="`color: ${color}`"
          >
            {{ color }}
          </option>
        </select>

        <label>设置线宽</label>
        <select class="margin-right-6" @input="selectInput">
          <option value="1">1px</option>
          <option value="2">2px</option>
          <option value="4">4px</option>
          <option value="6">6px</option>
          <option value="8">8px</option>
          <option value="10">10px</option>
          <option value="12">12px</option>
          <option value="14">14px</option>
          <option value="16">16px</option>
          <option value="18">18px</option>
        </select>

        <label>选择图片上传</label>
        <input class="margin-right-6" type="file" @change="uploadFile" placeholder="12142">
      </div>
      <div>
        <button class="margin-right-6" @click="revocation">撤销</button>
        <button class="margin-right-6" @click="recover">恢复</button>
      </div>
      <div class="resize-box">

      </div>
    </div>
    <canvas class="size-full-100" ref="canvasRef"></canvas>
  </div>
</template>

<script lang="ts" setup>
import {Drawing} from '@/utils/Drawing'
import {ref, onMounted} from 'vue'

const canvasRef = ref<HTMLCanvasElement | null>(null)
const boxRef = ref<HTMLElement | null>(null)
const drawStatus = ref(true)

let drawing: Drawing

const colors = ['#000000', '#f44200', '#0bf400', '#003cf4', '#f400e8', '#ff9e9e']

onMounted(() => {
  if (boxRef.value && canvasRef.value) {
    const {width, height} = boxRef.value.getBoundingClientRect()

    const canvas = canvasRef.value
    canvas.width = width
    canvas.height = height

    drawing = new Drawing(canvas)
  }
})

function back() {
  drawing?.playback()
}

function clearRect() {
  drawing?.clearRect()
}

function clearDraw() {
  drawing?.clearDraw()
}

function draw() {
  if (drawing) {
    if (drawStatus.value) {
      drawing.stopDraw()
      drawStatus.value = false
    } else {
      drawing.startDraw()
      drawStatus.value = true
    }
  }
}

function selectStrokeColor(event: any) {
  drawing.setStrokeColor(event.target.value)
}

function selectInput(event: any) {
  drawing.setLineWidth(+event.target.value)
}

function uploadFile(event: any) {
  const [file] = event.target.files
  drawing.appendImage(file)
}

function revocation() {
  drawing.revocation()
}

function recover() {
  drawing.recover()
}
</script>

<style scoped lang="scss">
.canvas-test {
  position: relative;

  &-action {
    position: absolute;
    padding-left: 100px;
  }
}
</style>
